<template>
	<div>
		<div class="shop_main">
			  <el-table
			     ref="multipleTable"
			     :data="this.$store.state.cartData"
			     tooltip-effect="dark"
			     style="width: 100%"
			     @selection-change="handleSelectionChange">
			     <el-table-column
			       type="selection"
			       width="55">
			     </el-table-column>
			     <el-table-column
			       width="160">
			       <template slot-scope="scope">
						<img :src="'http://106.15.179.105:3000/'+scope.row.productImg" alt="" style="width: 120px;">
				   </template>
			     </el-table-column>
			     <el-table-column
			       prop="productName"
			       label="商品名称"
			       width="300">
			     </el-table-column>
			     <el-table-column
			       prop="price"
			       label="单价">
				   <template slot-scope="scope">
					   {{scope.row.price}}元
				   </template>
			     </el-table-column>
				 <el-table-column
				   prop="num"
				   label="数量">
				   <template slot-scope="scope">
					   <button class="btn"> - </button>
					   <input type="text" v-model="scope.row.num" style="width: 20px;" @keydown.enter="upnum(scope.row.num,scope.row.productID,scope.row.maxNum)">
					   <button class="btn"> + </button>
				   </template>
				 </el-table-column>
				 <el-table-column
				   prop="money"
				   label="小计">
				   <template slot-scope="scope">
				   		<span style="color: #FF6700;">{{scope.row.money}}元</span>
				   </template>
				 </el-table-column>
				 <el-table-column
				   width="120"
				   label="操作">
				   <template slot-scope="scope">
					   
					   
					   <el-popover
					     placement="top"
					     width="160"
					     v-model="scope.row.visible"
						 trigger="click">
					     <p>确定删除吗？</p>
					     <div style="text-align: right; margin: 0">
					       <el-button type="primary" size="mini" @click="delShop(scope.row.productID)">确定</el-button>
					     </div>
					     <span slot="reference" class="el-icon-error delIcon"></span>
					   </el-popover>
					   
					   
				   
				   </template>
				 </el-table-column>
			   </el-table>
			   <div class="shop_foot">
				   <div class="card_left"><b @click="$router.push('/goods')">继续购物</b>|共{{this.$store.state.allNum}}件商品，已选择{{sum}}件商品</div>
				   <div class="card_right">合计:{{allPrice}}元 
						<el-button type="info" disabled v-show="sum == 0">去结算</el-button>
						<el-button type="warning" v-show="sum !== 0" @click="$router.push('/confirmOrder')">去结算</el-button>
				   </div>
			   </div>
		</div>
	</div>
</template>

<script>
	import shopApi from "@/api/shoppingCart.js"
	import loginApi from "@/api/login.js"
	export default{
		data(){
			return{
				sum:0,
				allPrice:0
			}
		},
		methods:{
			handleSelectionChange(val) {
				this.sum = 0
				this.allPrice = 0
				val.forEach(item=>{
					this.sum += item.num
					this.allPrice += item.money
				})
				this.$store.commit("setOrder",val)
			},
			async upnum(num,id,maxNum){
				if(num > maxNum){
					num = maxNum
				}
				let {data:res} = await shopApi.updateShoppingCart({user_id: this.$store.state.user_id, product_id: id, num: num})
				console.log(res)
				if(res.code == "001"){
					this.$notify({
					    message: res.msg,
					    type: 'success'
					});
					loginApi.getShoppingCart({user_id: this.$store.state.user_id})
					.then(res=>{
						if(res.data.code === "001"){
							this.$store.commit("setCartData",res.data.shoppingCartData)
						}
					})
				}
			},
			async delShop(id){
				let {data:res} = await shopApi.deleteShoppingCart({user_id: this.$store.state.user_id, product_id: id})
				if(res.code == "001"){
					this.$notify({
					    message: res.msg,
					    type: 'success'
					});
					loginApi.getShoppingCart({user_id: this.$store.state.user_id})
					.then(res=>{
						if(res.data.code === "001"){
							this.$store.commit("setCartData",res.data.shoppingCartData)
						}
					})
				}
			},
		}
		
	}
</script>

<style scoped="scoped">
	.shop_main{
		width: 1225px;
		min-height: 400px;
		margin: 0 auto;
	}
	.el-table{
		margin: 30px 0;
		font-size: 18px;
	}
	.btn{
		width: 15px;
	}
	.shop_foot{
		height: 40px;
		background-color: white;
		margin-bottom:30px;
		padding: 0;
	}
	.card_left{
		float: left;
	}
	.card_right{
		float: right;
	}
	.card_right>button{
		width: 100px;
		height: 40px;
	}
</style>
